<template>
  <div>
    <BasicTable @register="registerTable" size="small">
      <template #toolbar>
        <a-button preIcon="ant-design:plus-circle-outlined" type="primary"
         v-auth="'Basic.CustomerManagement.Create'"
         @click="openCreateCustomerModal">
          {{ t('common.createText') }}
        </a-button>
      </template>

      <template #action="{ record }">
        <TableAction :actions="[
          {
            icon: 'ant-design:delete-outlined',
            color: 'error',
            label: t('common.delText'),
            auth: 'Basic.CustomerManagement.Delete',
            popConfirm: {
              title: t('common.askDelete'),
              placement: 'left',
              confirm: handleDelete.bind(null, record),
            },
          },
        ]" />
      </template>

    </BasicTable>

    <CreateCustomer @register="registerCreateModal" @reload="reload" :bodyStyle="{ 'padding-top': '0' }" />

  </div>
</template>
    
<script lang="ts">
import { defineComponent } from 'vue';
import { BasicTable, useTable,TableAction } from '/@/components/Table';
import { tableColumns, searchFormSchema, getTableListAsync, getChinaAsync, deleteAsync } from '/@/views/basic/customer/customer';
import { useI18n } from '/@/hooks/web/useI18n';
import { useModal } from '/@/components/Modal';
import CreateCustomer from './CreateCustomer.vue';
 
export default defineComponent({
  name: 'Customer',
  components: {
    BasicTable,
    TableAction,
    CreateCustomer,
  },
  setup() {
    const { t } = useI18n();
    const [registerCreateModal, { openModal: openCreateCustomerModal }] = useModal();
    const [registerTable, { reload }] = useTable({
      columns: tableColumns,
      formConfig: {
        labelWidth: 70,
        schemas: searchFormSchema,
      },
      api: getTableListAsync,
      showTableSetting: true,
      useSearchForm: true,
      bordered: true,
      canResize: true,
      showIndexColumn: true,
      immediate: true,
      scroll: { x: true },
      actionColumn: {
          width: 220,
          title: t('common.action'),
          dataIndex: 'action',
          slots: { customRender: 'action' },
        },
    });

    async function handleDelete(record: Recordable) {
      await deleteAsync({ id: record.id });
      await reload();
    }

    getChinaAsync();

    return {
      t,
      registerTable,
      reload,
      handleDelete,
      registerCreateModal,
      openCreateCustomerModal,
    };
  },
});


</script>
    